//(function(w) {
"use strict"

function Layout() {
	this.defaults = {
		msg: "",
		timer: 3000,
		width: "300px",
		left: 0,
		direction: "bottom", //top  bottom  righttop rightbottom  
		color: "#ea0000",
		items: {},
		topWin: (function(p, c) {
			while(p != c) {
				c = p;
				p = p.parent;
			}
			return c;
		})(window.parent, window),
	};

};
Layout.prototype = {
	tips: function(id, options) {
		let _This = this;
		_This.options = deepCopy(_This.defaults, options);
		let outdiv = _This.loadHtml(id);
		return(function() {
			document.onclick = function() {
				_This.hideItem();
			}
		})();
	},
	loadHtml: function(id) {
		let _This = this;
		let defaultVl = this.options;
		let _element = this.getById(id);
		let timer = defaultVl.timer;
		let eleTop = _element.offsetTop;
		let eleLeft = _element.offsetLeft;
		let eleHei = _element.offsetHeight;
		let eleWid = _element.offsetWidth;
		let arrorleft = eleLeft + 15;
		let arrowTop = eleTop - 10;
		if(defaultVl.items[id]) {
			
			_This.removeItem(id);
		};
		//console.log("top===>"+eleTop+"====>left===>"+eleLeft+"===>height===>"+eleHei+"==>width==="+eleWid);
		let outContemtStyle = "left:" + eleLeft + "px;width:" + defaultVl.width + ";background:" + defaultVl.color + ";position: absolute;border-radius: 4px;color: #fff;font-size: 12px;text-align: left;filter:Alpha(Opacity=50);opacity: 0.7;display:block;word-break: break-all;word-wrap: break-word;z-index: 100;padding: 4px;";
		let outdiv = _This.createItem("div", outContemtStyle, { id: id + "_tips" });
		outdiv.innerHTML = defaultVl.msg;
		outdiv.onclick = function() {

		};
		_element.parentNode.appendChild(outdiv);
		//document.body.appendChild(outdiv);
		let outDivHeight = outdiv.offsetHeight;
		let outpositiontop = eleTop + eleHei + 10 + "px";
		let outpositionleft = eleLeft + eleWid / 2 - 10 + defaultVl.left + "px";
		let arrowposition = "top:-10px; border-bottom: 10px solid " + defaultVl.color + ";";
		//let arrowStyle="left:"+arrorleft+"px;top:"+arrowTop+"px; border-top: 10px solid #08B2ED;border-left: 10px solid #fff;border-right: 10px solid #fff;box-sizing: border-box; display: block;width: 0;height: 10px;position: absolute;opacity: 0.7;";

		if(defaultVl.direction == "top") {
			outpositiontop = eleTop - outDivHeight - 10 + "px";
			outpositionleft = eleLeft + defaultVl.left + "px";
			arrowposition = "bottom:-10px; border-top: 10px solid " + defaultVl.color + ";";
		} else if(defaultVl.direction == "righttop") {
			outpositiontop = eleTop - outDivHeight - 10 + "px";
			arrowposition = "bottom:-10px; border-top: 10px solid " + defaultVl.color + ";";
		} else if(defaultVl.direction == "bottom") {
			// outpositiontop=eleTop-outDivHeight-10+"px";
			outpositionleft = eleLeft + defaultVl.left + "px";
		}
		outdiv.style.top = outpositiontop;
		outdiv.style.left = outpositionleft;
		let arrowStyle = arrowposition + "left:10px;border-left: 10px solid #fff;border-right: 10px solid #fff;box-sizing: border-box; display: block;width: 0;height: 10px;position: absolute;filter:Alpha(Opacity=50);opacity: 0.7;";
		//let arrowStyle="left:10px;bottom:-10px; border-top: 10px solid "+defaultVl.color+";border-left: 10px solid #fff;border-right: 10px solid #fff;box-sizing: border-box; display: block;width: 0;height: 10px;position: absolute;filter:Alpha(Opacity=50);opacity: 0.7;";

		let outArrow = _This.createItem("div", arrowStyle);
		outdiv.appendChild(outArrow);
		// document.body.appendChild(outArrow);

		defaultVl.items[id] = id;
		if(timer) {
			setTimeout(function() {
				_This.hideItem(id);
			}, timer)
		}
		return outdiv;
	},
	createItem: function(tagnName, styles, attrs) {
		var objDiv = document.createElement(tagnName); //div span
		objDiv.style.cssText = styles;
		attrs = attrs || {};
		for(var attrItem in attrs) {
			objDiv[attrItem] = attrs[attrItem];
		}
		return objDiv;
	},
	removeItem: function(id) {
		let content = this.getById(id + '_tips');
		if(!!content) { content.parentNode.removeChild(content); 			
		 delete this.options.items[id];
		}
	},
	hideItem: function(id) {
		if(!id) {
			for(let item in this.options.items) {
				this.hideItem(item);
			}
			return;
		}
		this.removeItem(id);
	},
	getById: function(id) {
		return document.getElementById(id);
	}
};

function deepCopy(dest, source) {
	dest = dest || {};
	if(typeof source == 'object' && source !== null) {
		for(var key in source) {
			if(dest.hasOwnProperty(key)) {
				dest[key] = source[key];
			}
		}
	}
	return dest;
}
let layout=new Layout();
//console.log(Layout);
//})(window);